<template>

  <div class="pageClass">
<gundong></gundong>
    <div class="swiper-container">
    <swiper :options="swiperOptions">
      <div class="swiper-slide">
        <img src="./../../../../static/engineering5188/homPage/homeBg.png"/>
      </div>
      <div class="swiper-slide">
        <img src="./../../../../static/engineering5188/homPage/homeBgTwo.png"/>
      </div>
      <div class="swiper-slide">
        <img src="./../../../../static/engineering5188/homPage/homeBgThree.png"/>
      </div>
    </swiper>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
    <!-- <el-carousel :initial-index="initialIndexNum" class="carouselStype" :autoplay="false" arrow="always">
      <el-carousel-item>
        <div class="page">
          

        </div>
      </el-carousel-item>

      <el-carousel-item>

        <newHomePageTwo></newHomePageTwo>

      </el-carousel-item>


      <el-carousel-item>

        <newHomePageThree></newHomePageThree>

      </el-carousel-item>

    </el-carousel> -->

    <div class="bottomSt">

      <div v-for="(item, index) in contentData" :key="index" class="bottomStyle"  @click="jumpFunc(item.path)">
        <div class="bottomHeard">
          <div class="itemText">
            {{ item.text }}
          </div>
          <div>
            <img class="HeardImg" :src="item.img" />
          </div>
        </div>

        <div class="itemContent">
          <div v-for="list in item.contentList" :key="list">{{ list }}</div>
        </div>

        <div class="itemTypeText">
          <div class="itemTypeTextOne">
            {{ item.typeText }}
          </div>
          <div class="rightIconDiv">
            <img src="../../../../static/engineering5188/homPage/rightIcon.png" alt="">
          </div>
        </div>

      </div>

    </div>

     <!-- 底部footer -->
     <div class="footerStype">
            Copyright © 2024 线上海事展 All Rights Reserved. 京公网安备11010602005977号 | 蜀ICP备11019833号
          </div>
  </div>

</template>
<script>

import { mapState } from 'vuex';


import newHomePageTwo from './categoryComp/newHomePageTwo.vue';
import newHomePageThree from './categoryComp/newHomePageThree.vue';
import Vue from 'vue';
import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/css/swiper.css';
import gundong from "../../../../components/page/engineering5188/gundong.vue";

Vue.use(VueAwesomeSwiper);

export default {
  name: "newHome",
  components: {
    newHomePageTwo,
    newHomePageThree,
    gundong
  },
  data() {
    return {
      swiperOptions: {
        slidesPerView: 1,
        spaceBetween: 10,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        loop: true,
        autoplay: {
        delay: 3000, // 3秒自动切换
        disableOnInteraction: false, // 用户操作后继续自动切换
    },
      },
      initialIndexNum: 0,
      contentData: [
        {
          id: 0,
          text: "注册登录",
          img: require("./../../../../static/engineering5188/homPage/zcIcon.png"),
          content: "VIP通行证，分享即开财路！注册即享全球海事圈层，每邀一单佣金自动入袋",
          contentList:[
            '• 获得企业及产品展示资格',
            '• 分享即获得推荐奖励机会',
          ],
          typeText: "立即加入",
          path: '/newLogin'
        },
        {
          id: 1,
          text: "企业与产品",
          img: require("./../../../../static/engineering5188/homPage/chuanIcon.png"),
          content: "30秒极速匹配！百万级海事资源库，验厂报告/实时产能一键穿透",
          contentList:[
            '• 企业形象是获益的根本',
            '• 产品展示是订单的来源',
          ],
          typeText: "立即加入",
          path:'/product'
        },
        {
          id: 2,
          text: "排行与指数",
          img: require("./../../../../static/engineering5188/homPage/phIcon.png"),
          content: "用AI算法投票的采购指南！TOP100供应商动态热力榜，成交转化率可视化追踪",
          typeText: "立即加入",
          contentList:[
            '• 信用排行行为企业增信',
            '• 价格指数让采购透明',
          ],
          path:'/Dashboard'
        }, {
          id: 3,
          text: "服务与定制",
          img: require("./../../../../static/engineering5188/homPage/free.png"),
          content: "海事界的超级链接器！政府背书×技术天团×金融配套，您的需求就是我们的开发令",
          contentList:[
            '• 定制让获益更快捷',
            '• 服务让交易更安全',
          ],
          path:'/custom'
          // typeText: "立即加入"
        }
      ],
      index_notice:''
    };
  },
  computed: {
    ...mapState([
      "userInfo",
    ]),
  },
  watch: {},
  created() {
    this.$httpApi('/api/setting','get').then(res => {
      this.index_notice = res.data.index_notice;
    })
  },
  methods: {
    onRoundS(num) {
      this.initialIndexNum = num;
      console.log(this.initialIndexNum)
    },
    jumpFunc(path) {
      if(path){
        this.$router.push(path)
      } else {
        this.$router.push("/newLogin")
      }
      
    }

  },
};
</script>

<style scoped lang="less">
.pageClass {
  position: relative;
  height: 100vh;
  width: 100vw;
}

.rightIconDiv {
  padding-left: 4px;

  img {
    width: 20px;
    height: 20px;
  }
}

.HeardImg {
  width: 48px;
  height: 48px;
}

.footerStype {
position: absolute;
  bottom: 5px;
  color: aqua;
  height: 67px;
  width: 100%;
  text-align: center;
  border-top: 0.5px solid #D3D8DE;
  opacity: 0.3;
  font-family: Arial, Arial;
  font-weight: 400;
  font-size: 12px;
  color: #FFFFFF;
  line-height: 67px;
  font-style: normal;
  text-transform: none;
  z-index: 999;
}

/deep/ .el-carousel__container {
  height: 100vh;
}

.right-img {

  padding-right: 10px;

  img {
    width: 24px;
    height: 24px;
  }

}

.heard-img {
  width: 204px;
  height: 60px;
}

//  .el-carousel {
//      width: 100vw; /* 宽度占满视口宽度 */
//      height: 100vh; /* 高度占满视口高度 */
//    }

.el-carousel-item {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #fff;
}

.page {
  width: 100%;
  height: 100%;
  background-image: url("./../../../../static/engineering5188/homPage/homeBg.png");
  background-size: 100% 100%;
  /* 背景图片不重复 */
  background-repeat: no-repeat;
  /* 背景图片居中显示 */
  background-position: center center;

  .heard {
    width: 1540px;

    margin: auto;
    display: flex;
    justify-content: space-between;
    height: 96px;
    padding-top: 31px;

    .right {
      display: flex;
      /* 垂直居中子元素 */
      align-items: center;

      .loginText {
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        color: #FFFFFF;
        line-height: 23px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        -webkit-text-stroke: 1px rgba(0, 0, 0, 0);
      }
    }
  }

  .middle {
    margin-top: 196px;
    margin-left: 280px;

    .middleText {
      font-family: Arial Black, Arial Black;
      font-weight: 400;
      font-size: 88px;
      color: #FFFFFF;
      font-style: normal;
      text-transform: none;
      -webkit-text-stroke: 1px rgba(0, 0, 0, 0);
    }

    .endText {

      font-family: Arial Black, Arial Black;
      font-weight: 400;
      font-size: 48px;
      color: #FFFFFF;
      font-style: normal;
      text-transform: none;
      -webkit-text-stroke: 1px rgba(0, 0, 0, 0);
    }
  }

  .round {
    margin-top: 503px;
    margin-left: 270px;
    display: flex;
    /* 垂直居中子元素 */
    align-items: center;

    .roundBig {
      width: 20px;
      height: 20px;
      border: 1px solid #FFFFFF;
      border-radius: 50%;
      display: grid;
      place-items: center;

      .roundBigOne {
        width: 8px;
        height: 8px;
        background: #FFFFFF;
        border-radius: 50%;
      }
    }

    .roundSmall {
      width: 14px;
      height: 14px;
      border: 1px solid #FFFFFF;
      border-radius: 50%;
      opacity: 0.3;
      display: grid;
      place-items: center;
      margin-left: 32px;

      .roundSmallTwo {
        width: 8px;
        height: 8px;
        background: #FFFFFF;
        border-radius: 50%;
      }
    }




  }


}

.bottomSt {
  position: absolute;
  bottom: 100px;
  left: calc((100% - 1530px)/2);
  width: 1530px;
  display: flex;
  justify-content: space-between;
  height: 233px;
  margin: auto;
  margin-top: 37px;
  z-index: 999;



  .bottomStyle {
   
    width: 362px;
    height: 100%;
    background: rgb(1,75,196,0.7);
    // box-shadow: 0px 0px 18px 1px rgba(42, 84, 163, 0.15);
    border-radius: 20px;
    color: #FFFFFF;
    cursor: pointer;

    .bottomHeard {
      display: flex;
      justify-content: space-between;
      padding: 0 28px;
      /* 垂直居中子元素 */
      align-items: end;
      margin-top: 27px;

      .itemText {
        font-weight: 900;
        font-size: 27px;
        color: #FFFFFF;
        text-align: left;
        font-style: normal;
        text-transform: none;
        -webkit-text-stroke: 1px rgba(0, 0, 0, 0);
      }
    }

    .itemContent {
      width: 306px;
      height: 66px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 16px;
      color: #FFFFFF;
      line-height: 30px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      -webkit-text-stroke: 1px rgba(0, 0, 0, 0);
      margin: auto;
      margin-top: 10px;
      margin-bottom: 10px;
    }

    .itemTypeText {
      display: flex;
      padding-left: 28px;
      padding-top: 20px;

      .itemTypeTextOne {

        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #FFFFFF;

        font-style: normal;
        text-transform: none;
        cursor: pointer;
      }
    }

  }

  .bottomStyle:hover{
    box-shadow: 0 0 10px rgba(255,255,255, .2);
    background: rgba(1,75,196,1)!important;
  }
}

.swiper-container {
  width: 100vw;
  height: 100vh;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #fff;
  background: #007aff; /* Example background color */
  img{
    width: 100%;
    height: 100%;
  }
}

.swiper-pagination {
  position: absolute;
  bottom: 20px;
  text-align: center;
  z-index: 10;
}

.swiper-button-next,
.swiper-button-prev {
  color: #fff;
  z-index: 10;
}
</style>